<template>
	<view class="container">
		<view class="fixTab" @click="isShowRegulation=true"> 使用规则 </view>
		<!-- 类目 -->
		<view class="tab-bar">
			<view :class="flag == 0 ? 'select' : ''" @tap="handleTypeChange(0)">未使用</view>
			<view :class="flag == 1 ? 'select' : ''" @tap="handleTypeChange(1)">已使用</view>
			<view :class="flag == 2 ? 'select' : ''" @tap="handleTypeChange(2)">已过期</view>
		</view>
		<!-- 优惠券列表 -->
		<view class="nullList" v-if="couponList.length==0">
			<image class="nullList_icon" src="https://images.linglinggong.net/static/icon3/youhuiquan2.png"
				mode="aspectFill"></image>
			<text class="nullList_text">你还没有优惠券哦！</text>
		</view>
		<view class="list">
			<view v-for="item in couponList" :key="item.id"
				@click="handleUseCoupon(item.id,item.value,item.startTime,item.type,item.directPassCard,item.fullReductionLimit)"
				:style="{'background-image': (item.type!=2&&flag== 0 && ( item.value<=berforCoupon || ['',null,undefined].includes(berforCoupon)) && item.directPassCard == 0)||(item.type==2&&flag== 0 && (item.fullReductionLimit<=berforCoupon || ['',null,undefined].includes(berforCoupon)) && item.directPassCard == 0) ? `url(${bg})` : `url(${noBg})`}">
				<view class="jjgq" v-if="flag == 0&&item.expiration">
					<text>即将过期</text>
				</view>
				<view class="jjgq" v-else>
					<text>{{item.remark}}</text>
				</view>
				<view class="left">
					<view class="left1">
						<view
							:class="flag==0 ? (item.value>berforCoupon||(item.fullReductionLimit>berforCoupon&&item.type==2))&&berforCoupon ? 'left-item2':'left-item':'left-item2'">
							<text v-if="true">{{item.huodong==9 ? '活动':'赠送'}}</text>
							<text v-else>邀新获得</text>
						</view>
						<view
							:class="flag==0 ? (item.value>berforCoupon||(item.fullReductionLimit>berforCoupon&&item.type==2))&&berforCoupon ? 'left-item-text2':'left-item-text':'left-item-text2'">
							<text v-if="item.type===0||item.type===2">薪资抵用券</text><text
								v-if="item.type===1">薪资折扣券</text>
						</view>
					</view>
					<view class="left2">
						<text>开始时间：{{item.startTime.split(' ')[0]}}</text>
						<text>结束时间：{{item.endTime.split(' ')[0]}}</text>
					</view>
				</view>
				<image v-if="flag==0&&item.directPassCard==1" class="left_image"
					src="https://images.linglinggong.net/static/icon3/ztk618.png" mode="aspectFill"></image>
				<image v-if="flag==1" class="left_image" src="https://images.linglinggong.net/static/icon3/ysy.png"
					mode="aspectFill"></image>
				<image v-if="flag==2" class="left_image" src="https://images.linglinggong.net/static/icon3/ygq.png"
					mode="aspectFill"></image>
				<image
					v-if="(item.value>berforCoupon||(item.fullReductionLimit>berforCoupon&&item.type==2))&&berforCoupon&&flag== 0"
					class="left_image" src="https://images.linglinggong.net/static/icon3/bky.png" mode="aspectFill">
				</image>
				<view class="right">
					<view class="right-text-view">
						<view v-if="item.type===0" class="">
							<text class="right-text-fuhao">￥</text><text class="right-text">{{ item.value }}</text>
						</view>
						<view v-if="item.type===1" class="">
							<text class="right-text">{{item.value*10}}</text><text class="right-text"
								style="font-size: 36rpx;padding-left: 10rpx;">折</text>
						</view>
						<view v-if="item.type===2" class="">
							<text class="right-text-fuhao">￥</text><text class="right-text">{{ item.value }}</text>
						</view>
					</view>
					<text v-if="item.type==0" class="right-text-description">无门槛</text>
					<text v-if="item.type==1&&amount"
						class="right-text-description">最高省{{amount*(100-item.value*100)/100}}</text>
					<text class="right-text-description" v-if="item.type==2">满{{item.fullReductionLimit}}元可用</text>
					<!-- <view v-if="flag==0" class="right-text-button">立即使用</view> -->
				</view>
			</view>
		</view>
		<view class="regulation" v-show="isShowRegulation">
			<view class="title">{{regulationInfo.articleTitle}}</view>
			<view class="regulation-info" v-html="regulationInfo.articleContent"></view>
			<view class="regulation-button" @click="isShowRegulation=false">确定</view>
		</view>
		<view class="mask" @touchmove.stop.prevent="()=>{false}" v-show="isShowRegulation"
			@click="isShowRegulation=false"></view>
	</view>
</template>
<script>
	import format from '@/libs/day-format.js'
	import {
		youhuiquan_regulation
	} from '@/libs/unit.js'
	export default {
		data() {
			return {
				noBg: 'https://images.linglinggong.net/static/icon2/01.png',
				bg: 'https://images.linglinggong.net/static/icon2/02.png',
				flag: 0, //当前类目0未使用 ,1已使用,2已过期
				couponList: [], //优惠券列表
				select: '', //选中的优惠券
				handleIsStop: true, // 是否允许切换,
				berforCoupon: 0, //获取前面传过来的金额
				isShowRegulation: false,
				regulationInfo: '',
				taskId: '',
				status: 0,
				amount: ''
			}
		},
		methods: {
			formatDate(date) {
				var d = date,
					month = '' + (d.getMonth() + 1),
					day = '' + d.getDate(),
					year = d.getFullYear();
				if (month.length < 2) month = '0' + month;
				if (day.length < 2) day = '0' + day;
				return [year, month, day].join('-');
			},
			//使用优惠券
			handleUseCoupon(couponId, value, startTime, type, directPassCard, fullReductionLimit) {
				// 如果优惠券使用时间未到
				let day_0 = new Date()
				day_0.setDate(day_0.getDate())
				let today = this.formatDate(day_0)
				// console.log(today, startTime.slice(0, 10), today < startTime.slice(0, 10))
				if (today < startTime.slice(0, 10)) return uni.showToast({
					title: '还未到使用时间~',
					icon: 'none'
				})
				this.select = couponId
				// 20210416-jc
				if (this.berforCoupon < fullReductionLimit && type == 2) {
					uni.showToast({
						title: '不满足使用条件，当前不可用',
						icon: 'none'
					})
					return;
				}
				if (this.flag === 0) {
					if (this.berforCoupon < value) {
						uni.showToast({
							title: '低于结算金，优惠券不可用',
							icon: 'none'
						})
					} else {
						let pages = getCurrentPages()
						pages[pages.length - 2].$vm.taskDTO.couponId = couponId
						pages[pages.length - 2].$vm.couponName = value
						pages[pages.length - 2].$vm.couponType = type
						uni.navigateBack()
					}
				}
			},
			// 更改类目
			handleTypeChange(a) {
				this.status = a
				this.coupon_list()
			},
			//判断过期时间
			expirationTime(time) {
				if (time == null) return true
				let timestamp = new Date().getTime()
				time = time.replace(/-/g, '/')
				let time1 = new Date(time).getTime()
				return timestamp > time1 - (3 * 3600 * 24 * 1000)
			},
			// 获取我的优惠券
			async coupon_list(a) {
				if (!this.handleIsStop) return uni.showToast({
					title: '你点击得太快啦~',
					icon: 'none'
				}) // 说明上一条请求结果未返回
				// 是否允许切换
				this.handleIsStop = false
				let res = await this.$fetch(this.$api.coupon_list618, {
					status: this.status,
					taskId: this.taskId || ''
				}, 'POST')
				if (res.code) return uni.showToast({
					title: res.msg,
					icon: 'none'
				})
				// 是否允许切换
				this.handleIsStop = true
				this.couponList = res.rows
				this.couponList.forEach(item => {
					item.expiration = this.expirationTime(item.endTime)
				})
				this.flag = this.status
				// this.couponList = []
			},
		},
		onShow() {
			this.coupon_list()
		},
		onLoad(e) {
			this.taskId = e.taskId
			this.berforCoupon = e.berforCoupon;
			this.amount = e.amount
			youhuiquan_regulation(16).then((v) => {
				this.regulationInfo = v
			})
		},
		onNavigationBarButtonTap(e) {
			this.isShowRegulation = true
			// uni.navigateTo({
			// 	url: '/pages/app-employer/my-employee/my-blackList'
			// })
		},
		onShareAppMessage() {
			return {
				title: "足不出户，免费招工",
				desc: "线上招募零工，工价透明，免费使用",
				path: `/pages/start-n/start-n`,
				imageUrl: 'https://images.linglinggong.net/static/employer-share.jpg',
				success: res => {}
			}
		},
	}
</script>
<style lang="less">
	.container {
		overflow: hidden;

		// border: 1px solid #000000;
		//background-image: url();
		.fixTab {
			position: fixed;
			top: 90rpx;
			right: 0;
			z-index: 999;
			height: 68rpx;
			line-height: 68rpx;
			font-size: 32rpx;
			color: #FFFFFF;
			background-color: rgba(0, 0, 0, .7);
			border-radius: 36rpx 0rpx 0rpx 36rpx;
			padding: 0 30rpx;
		}

		&>.tab-bar {
			z-index: 1;
			position: fixed;
			display: flex;
			height: 90rpx;
			background-color: #FFFFFF;
			width: 750rpx;
			font-size: 26rpx;
			box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.03);
			justify-content: space-around;

			&>view {
				// border: 1px solid #007AFF;
				display: flex;
				width: 25vw;
				height: 90rpx;
				// position: relative;
				justify-content: center;
				align-items: center;
				color: rgba(64, 33, 16, 0.50);
			}

			&>.select {
				display: flex;
				justify-content: center;
				align-items: center;
				position: relative;
				font-size: 32rpx;
				font-weight: bold;
				color: #402110;

				&::before {
					content: "";
					position: absolute;
					left: 65.75rpx;
					bottom: 0;
					width: 56rpx;
					height: 6rpx;
					background: #FCC928;
					border-radius: 3rpx;
				}
			}
		}

		&>.list {
			margin: 120rpx 30rpx 0;

			&>view {
				margin-bottom: 20rpx;
				width: 690rpx;
				height: 212rpx;
				background-repeat: no-repeat;
				background-size: 100% 100%;
				display: flex;
				justify-content: space-between;
				box-shadow: 0px 0px 20rpx 0px rgba(0, 0, 0, 0.06);
			}
		}
	}

	.mask {
		width: 750rpx;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 998;
	}

	.regulation {
		width: 630rpx;
		height: 809rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		z-index: 999;
		overflow: auto;
	}

	.title {
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		margin-top: 30rpx;
		text-align: center;
	}

	.regulation-info {
		margin-top: 54rpx;
		width: 549rpx;
		height: 569rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #7A7B7D;
		line-height: 45rpx;
		display: flex;
		flex-direction: column;
		overflow: auto;
	}

	.regulation-button {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 630rpx;
		height: 102rpx;
		border-top: 1rpx solid #E4E4E4;
		margin-bottom: 0px;
		font-size: 30rpx;
		font-weight: 500;
		color: #000000;
		margin-top: 20rpx;
	}

	.nullList {
		width: 300rpx;
		height: 330rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		position: fixed;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.nullList_icon {
		width: 240rpx;
		height: 240rpx;
	}

	.nullList_text {
		margin-top: 39rpx;
		font-size: 30rpx;
		font-weight: 400;
		color: #402110;
		line-height: 45rpx;
	}

	.left {
		margin-top: 46rpx;
		margin-left: 30rpx;
		height: 127rpx;
		// width: 252rpx;
	}

	.left1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 32rpx;
		// width: 252rpx;
	}

	.left-item {
		// width: 56rpx;
		padding: 2rpx 8rpx;
		height: 32rpx;
		background-color: rgba(254, 75, 40, 0.2);
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FE4B28;
		line-height: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left-item-text {
		margin-left: 12rpx;
		font-size: 32rpx;
		font-weight: bold;
		color: #000000;
		line-height: 45rpx;
	}

	.left2 {
		margin-top: 42rpx;
		display: flex;
		flex-direction: column;
		height: 60rpx;
		width: 252rpx;
		font-size: 20rpx;
		font-weight: 400;
		color: #787878;
		line-height: 35rpx;
	}

	.right {
		width: 220rpx;
		height: 212rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.right-text-view {}

	.right-text-fuhao {
		font-size: 36rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 45rpx;
	}

	.right-text {
		font-size: 68rpx;
		line-height: 68rpx;
		font-weight: bold;
		color: #FFFFFF;
	}

	.right-text-description {
		font-size: 28rpx;
		font-weight: 400;
		color: #FFFFFF;
	}

	.right-text-button {
		width: 108rpx;
		height: 40rpx;
		background: #FFFFFF;
		border-radius: 22rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #FD7803;
		line-height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 12rpx;
	}

	.left_image {
		position: relative;
		float: left;
		width: 188rpx;
		height: 154rpx;
		margin: auto 0;
	}

	.left-item2 {
		width: 56rpx;
		height: 32rpx;
		background-color: #F5F5F5;
		border-radius: 4rpx;
		font-size: 20rpx;
		font-weight: 500;
		color: #C2C2C2;
		line-height: 45rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.left-item-text2 {
		font-size: 32rpx;
		font-weight: bold;
		color: #C4C4C4;
		line-height: 45rpx;
		margin-left: 12rpx;
	}

	.jjgq {
		// width: 112rpx;
		height: 28rpx;
		padding: 2rpx 15rpx;
		background: #FE4B28;
		position: absolute;
		border-radius: 12rpx 12rpx 12rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;

		&>text {
			font-size: 18rpx;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 18rpx;
		}
	}
</style>